<template>
  <view>
    <view class="company_box" :class="{ 'top-border': topBorder }">
      <view class="company_box_text">
        <view class="company_box_text_left">
          <view class="iconfont red" style="font-size: 40rpx">&#xe622;</view>
          <text>{{ currCompa.value }}</text>
        </view>
        <view class="iconfont red" style="font-size: 40rpx" @click="openPopup()">&#xe60f;</view>
      </view>
      <view class="company_box_text">
        <view class="company_box_text_left">
          <view class="iconfont red" style="font-size: 40rpx">&#xe602;</view>
          <text>{{ currCompa.address }}</text>
        </view>
        <view class="iconfont red" style="font-size: 40rpx" @click="goStore">&#xe645;</view>
      </view>
    </view>
    <!-- 弹窗 -->
    <u-popup :show="popupShow" @close="closePopup">
      <!-- 电话 -->
      <view class="content_box">
        <scroll-view scroll-y="true" class="scroll_view" :scroll-top="scrollTop">
          <view class="box">
            <view class="photo_no" @click="phoneCall(currCompa.sale_hotline)">
              <text class="name">销售热线：</text>
              <text class="text">{{ currCompa.sale_hotline }}</text>
            </view>
            <view class="photo_no" @click="phoneCall(currCompa.rescueTelephone)">
              <text class="name">救援电话：</text>
              <text class="text">{{ currCompa.rescueTelephone }}</text>
            </view>
            <view class="photo_no" @click="phoneCall(currCompa.hotline)">
              <text class="name">售后热线：</text>
              <text class="text">{{ currCompa.hotline }}</text>
            </view>
            <view class="photo_no" @click="phoneCall(currCompa.appointment_telephone)">
              <text class="name">预约电话：</text>
              <text class="text">{{ currCompa.appointment_telephone }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
      <!-- 电话 -->
      <!-- <view class="photo_box">
        <view class="box">
          <view
            class="photo_no"
            v-if="!!currCompa.hotline"
            @click="phoneCall(currCompa.hotline)"
          >
            服务热线:
            <text class="text">{{ currCompa.hotline }}</text>
          </view>
        </view>
        <view class="cancel" @click.stop="closePopup">取 消</view>
      </view> -->
    </u-popup>
  </view>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'CallupOrNavigation',
  props: {
    topBorder: Boolean,
    currCompa: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      popupShow: false
    }
  },
  methods: {
    // 打电话
    phoneCall(e) {
      uni.makePhoneCall({
        phoneNumber: `${e}`
      })
    },
    openPopup() {
      // this.$refs.popup.open()
      this.$emit('popupOper', false)
      this.popupShow = true
    },
    // 关闭联系人
    closePopup() {
      this.$emit('popupOper', true)
      // this.$refs.popup.close()
      this.popupShow = false
    },
    // 导航到店
    goStore() {
      let { latitude, longitude, address, value } = this.currCompa
      uni.openLocation({
        latitude: parseFloat(latitude),
        longitude: parseFloat(longitude),
        name: value,
        address: address
      })
    },
    // 打电话
    phoneCall(e) {
      uni.makePhoneCall({
        phoneNumber: `${e}`
      })
    }
  },
  computed: {
    ...mapState(['centers'])
  }
}
</script>

<style lang='scss' scoped>
// 公司地址模块
.company_box {
  .company_box_text {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 28rpx;
    line-height: 66rpx;

    .company_box_text_left {
      display: flex;
      flex-direction: row;
    }

    .iconfont {
      padding-right: 14rpx;
    }
  }
}

.top-border {
  margin-top: 18rpx;
  padding-top: 18rpx;
  border-top: 2rpx solid #e7e7e7;
}

// .photo_box {
//   background-color: #f6f6f6;
//   // margin-bottom: 30rpx;
//   .box {
//     background-color: #fff;
//     .photo_no {
//       text-align: center;
//       border-bottom: 1px solid #eee;
//       .text {
//         display: inline-block;
//         padding: 0 10rpx;
//         line-height: 108rpx;
//         font-size: 28rpx;
//         color: $theme-color;
//       }
//     }
//   }
//   .cancel {
//     margin-top: 8px;
//     text-align: center;
//     line-height: 118rpx;
//     font-size: 30rpx;
//     background-color: #fff;
//   }
// }
// 电话
.content_box {
  background-color: #f6f6f6;

  .box {
    background-color: #fff;
    padding: 30rpx 30rpx 45rpx 30rpx;

    .photo_no {
      text-align: center;

      .name {
        line-height: 108rpx;
      }

      .text {
        display: inline-block;
        padding: 0 10rpx;
        line-height: 108rpx;
        font-size: 28rpx;
        color: $theme-color;
      }
    }

    .borBtm {
      border-top: 1px solid #eee;
    }
  }

  .scroll_view {
    // height: 40vh;
    height: 508rpx;
  }
}
</style>